<template>
	<view class="share-page">
		<view class="container">
			<view class="image-box">
				<image class="image" :src="banner" mode="aspectFit"></image>
			</view>
			<view class="bottom-box">
				<button class="btn share" open-type="share">发送给好友</button>
				<button class="btn download" @click="downloadImage">保存到相册</button>
			</view>
		</view>
		<u-tabbar :value="1" activeColor="#5749f7" inactiveColo="#333" :fixed="false" :placeholder="false" safeAreaInsetBottom>
			<u-tabbar-item text="首页" icon="/static/tabbar/index.png" @click="tabbarChang('/pages/index/index')"></u-tabbar-item>
			<u-tabbar-item text="推广" icon="/static/tabbar/share_fill.png"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="/static/tabbar/my.png" @click="tabbarChang('/pages/my/my')"></u-tabbar-item>
		</u-tabbar>
		
		<canvas canvas-id="shareImageCanvas" id="shareImageCanvas" style="width: 750px; height: 1334px;"/>
	</view>
</template>

<script>
	import { getInviteFriends, getConfig, getMaterial } from '@/api/api'

	export default {
		data () {
			return {
				banner: '',
				
				userInfo: {},
				config: {},

				qrcode: '',
				shareUrl: '',
				shareCode: '',
			}
		},
		onLoad (options) {
			this.loadDate()
		},
		onShareAppMessage (el) {
			return {
				path: '/pages/login/login?regcode=' + this.shareCode,
			}
		},
		methods: {
			async loadDate () {
				uni.showLoading({ mask: true })
			
				let inviteReq = await getInviteFriends()
				if (inviteReq) {
					this.qrcode = inviteReq.data.qrcode
					this.shareUrl = inviteReq.data.url
					this.shareCode = inviteReq.data.regcode
				}
				
				let userReq = await getMaterial()
				if (userReq) {
					this.userInfo = userReq.data.data
				}
				
				let configReq = await getConfig()
				if (configReq) {
					this.config = configReq.data
				}
			
				uni.hideLoading({ noConflict: true })

				this.createPoster()
			},
			async createPoster () {
				uni.showLoading({
					title: '海报生成中...'
				})
				
				const ctx = uni.createCanvasContext('shareImageCanvas')
				
				let bg = await this.getImageInfo(this.config.bg_logo)
				ctx.drawImage(bg, 0, 0, 750, 1334)
			
				let QRcode = await this.getImageInfo(this.qrcode)
				ctx.drawImage(QRcode, 250, 1035, 250, 250)
				
				if (this.config.is_show_t == 1) {
					/* 头像 */
					let userImage = await this.getImageInfo(this.userInfo.avatar)
					let avatarurl_width = 100, //绘制的头像宽度
					  avatarurl_heigth = 100, //绘制的头像高度
					  avatarurl_x = 324, //绘制的头像在画布上的位置
					  avatarurl_y = 237 //绘制的头像在画布上的位置
					ctx.save() // 先保存状态 已便于画完圆再用
					ctx.beginPath() //开始绘制
					ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); // 画圆
					ctx.clip() // 剪切
					ctx.drawImage(userImage, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth) // 推进去图片
					ctx.restore() //恢复之前保存的绘图上下文状态 可以继续绘制
					
					/* 昵称 */
					ctx.setFontSize(26)
					ctx.setFillStyle("#fff")
					let userName = this.userInfo.name
					let textWidth = ctx.measureText(userName).width
					if (textWidth > 294) {
						userName = userName.substr(0, 10) + '...'
						textWidth = ctx.measureText(userName).width
					}

					ctx.fillText(userName, 375 - (textWidth / 2), 390)
				}
				
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'shareImageCanvas',
						x: 0,
						y: 0,
						width: 750,
						height: 1334,
						destWidth: 750,
						destHeight: 1334,
						success: (res) => {
							this.banner = res.tempFilePath
							uni.hideLoading()
						}
					})
				})
			},
			getImageInfo (url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success (image) {
							resolve(image.path)
						},
						fail(err) {
							console.log('getImageInfo err', err)
						}
					})
				})
			},
			downloadImage () {
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						uni.saveImageToPhotosAlbum({
							filePath: this.banner,
							success: (res) => {
								uni.showToast({
									title: '保存成功'
								})
							}
						})
					},
					fail () {
						uni.showModal({
							title: '请开启保存到相册权限',
							success (res) {
								if (res.confirm) {
									uni.openSetting()
								}
							}
						})
					}
				})
			},
			tabbarChang (url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
.share-page {
	box-sizing: border-box;
	height: 100vh;
	background-color: $bg-color;
	display: flex;
	flex-direction: column;
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.image-box {
		height: calc(100% - 120rpx);
		.image {
			width: 100%;
			height: 100%;
		}
	}
	.bottom-box {
		padding: 0 106rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn {
			margin: 0;
			padding: 0;
			border-radius: 80rpx;
			width: 262rpx;
			height: 80rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 80rpx;
			&.share {
				background-color: #28c445;
			}
			&.download {
				background-color: #5749f7;
			}
		}
	}
	
	::v-deep {
		.u-tabbar {
			flex: none !important;
		}
	}
	
	#shareImageCanvas {
		position: fixed;
		left: 10000px;
	}
}
</style>
